/**
 * 子应用的设置
 */

import { onMounted, watch } from 'vue';

// vben 偏好设置
import { preferences } from '@vben/preferences';

function isDarkTheme(theme: string) {
  let dark = theme === 'dark';
  if (theme === 'auto') {
    dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  }
  return dark;
}

// function getColors() {}

export function mixinThemeSetting() {
  onMounted(() => {
    const root = document.body;
    // console.log('偏好配置====>', preferences);
    // 设置 data-theme属性
    root.dataset.theme = preferences.theme.mode;
    // 设置class属性
    root.setAttribute('class', preferences.theme.mode);
  });

  // 监听主题变化
  watch(
    () => preferences.theme.mode,
    (mode: string) => {
      const { theme } = preferences;
      const root = document.body;
      if (Reflect.has(theme, 'mode')) {
        const dark = isDarkTheme(mode);
        root.classList.toggle('dark', dark);
      }
    },
    {
      immediate: true,
    },
  );

  // 监听主题色变化
  watch(
    () => preferences.theme.builtinType,
    (builtinType: string) => {
      const { theme } = preferences;
      const root = document.body;
      // micro-body 设置 data-theme=[builtinType]
      if (Reflect.has(theme, 'builtinType')) {
        const rootTheme = root.dataset.theme;
        if (rootTheme !== builtinType) {
          root.dataset.theme = builtinType;
        }
      }
    },
  );

  // 监听colorPrimary变化
  // watch(
  //   () => preferences.theme.colorPrimary,
  //   (mode: string) => {
  //     const root = document.body;
  //     // 获取到侧边栏背景色（--sidebar）
  //     // 获取到背景色 （--background）
  //     // 获取到加深背景色 （--background-deep）
  //     // 将获取到的背景色传递给基座应用
  //   },
  // );

  return {};
}
